"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
const taro_1 = require("@tarojs/taro");
const components_1 = require("@tarojs/components");
require("./fit.scss");
function Fit(porps) {
    // 获取系统信息
    const systemInfo = taro_1.default.getSystemInfoSync();
    // 胶囊按钮位置信息
    const menuButtonInfo = taro_1.default.getMenuButtonBoundingClientRect();
    // 导航栏高度 = 状态栏到胶囊的间距(胶囊距上距离-状态栏高度) * 2 + 胶囊高度 + 状态栏高度
    const [info, setInfo] = react_1.useState([0, 0, 0, 0, '#FFF', '#000']); // 导航栏高度 ,胶囊距右方间距(方保持左、右间距一致),胶囊距底部间距(保持底部间距一致),胶囊高度(自定义内容可与胶囊高度保证一致)
    const [type, setType] = react_1.useState('text');
    let _navBarHeight = ((menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight) || 0;
    let _menuRight = (systemInfo.screenWidth - menuButtonInfo.right) || 0;
    let _menuBotton = (menuButtonInfo.top - systemInfo.statusBarHeight) || 0;
    let _menuHeight = (menuButtonInfo.height) || 0;
    react_1.useEffect(() => {
        let _bgColor = '#FFF'; // 背景
        let _color = '#000'; // 字体颜色
        let _type = 'text'; // 组建类型
        if (porps.bgColor) {
            _bgColor = porps.bgColor;
        }
        if (porps.color) {
            _color = porps.color;
        }
        setInfo([_navBarHeight, _menuRight, _menuBotton / 2, _menuHeight, _bgColor, _color]);
        if (porps.type) {
            _type = porps.type;
        }
        return () => { };
    }, []);
    return (<components_1.View>
    <components_1.View className="nav-bar" style={{ height: `${info[0]}px`, background: `${info[4]}` }}>
      {
    // bottom: `${info[2]}px`
    type == 'text'
        ? <components_1.View className="text" style={{ height: `${info[3]}px`, minHeight: `${info[3]}px`, lineHeight: `${info[3]}px`, bottom: `${info[2]}px`, color: `${info[5]}` }}>{porps.title}</components_1.View>
        : <components_1.Input className="search" placeholder="输入关键词！" style={{ height: `${info[3]}px`, minHeight: `${info[3]}px`, lineHeight: `${info[3]}px`, left: `${info[1]}px`, bottom: `${info[2]}px`, color: `${info[5]}` }}></components_1.Input>}
    </components_1.View>
    
    {porps.seize ? <components_1.View className="content" style={{ height: `${info[0]}px` }}></components_1.View> : null}
  </components_1.View>);
}
exports.default = Fit;
//# sourceMappingURL=fit.jsx.map